//友情链接列表获取的ajax
$(function () {
  let form = layui.form
  let layer = layui.layer
  let index
  //点击添加按钮 弹出添加表单 实现添加功能
  $('.layui-btn-normal').click(function () {
    index = layer.open({
      title: '添加友情链接',
      type: 1,
      area: '500px',
      content: $('#formAdd').html(),
    })
  })
  //渲染列表表格
  function getLink() {
    $.get({
      url: 'admin/links',
      success: function (res) {
        if (res.status != 0) {
          return layer.msg('加载失败')
        }
        // 将数据和模版结合起来;
        let htmlStr = template('linkShow', res)
        //将模版渲染添加到页面中
        $('#tb').html(htmlStr)
      },
    })
  }
  getLink()

  let editIndex
  //点击编辑按钮实现编辑功能
  $('body').on('click', '.editBtn', function () {
    let id = $(this).attr('data-id')
    $.ajax({
      type: 'get',
      url: 'admin/links/' + id,
      success: function (res) {
        if (res.status != 0) {
          return layer.msg(res.message)
        }
        //弹出编辑模式
        editIndex = layer.open({
          title: '编辑友情链接',
          type: 1,
          area: '500px',
          content: $('#editAdd').html(),
        })
        // console.log(res);
        $('#preIcon').attr(
          'src',
          'http://localhost:8888/uploads/' + res.data.linkicon
        )
        //美化文件域
        $('.editBTN').click(function () {
          $('#editFile').click()
        })
        delete res.data.linkicon
        //给表单赋值
        form.val('editAdd', res.data)
        let file = null
        //监听文件选中事件
        $('#editFile').change(function (e) {
          const objectURL = URL.createObjectURL(e.target.files[0])
          file = e.target.files[0]
          $('#preIcon').attr('src', objectURL)
        })
        //给表单注册提交事件
        $('.editAdd').submit(function (e) {
          e.preventDefault()
          let fd = new FormData(this)
          // if (file) {
          //   fd.append('linkicon', file);
          // }
          let id = fd.get('id')
          // return;
          // fd.forEach((v, k) => {
          //   console.log(v, k);
          // });
          // delete res.data.linkicon;

          $.ajax({
            type: 'PUT',
            url: 'admin/links/' + id,
            data: fd,
            //表单提交必须加的属性
            processData: false,
            contentType: false,
            success: function (res) {
              if (res.status === 0) {
                layer.msg(res.message)
                layer.close(editIndex)
                getLink()
              }
            },
          })
        })
      },
    })
  })
  let delIndex
  //点击删除按钮实现删除功能
  $('.layui-card-body').on('click', '.delBtn', function () {
    let id = $(this).attr('data-id')
    delIndex = layer.confirm('确定要删除吗?', function (index) {
      //do something
      $.ajax({
        type: 'DELETE',
        url: 'admin/links/' + id,
      })
      layer.close(delIndex)
      getLink()
    })
    //点击添加按钮给表单赋值重新渲染
  })
  //添加的表单功能
  $('body').on('submit', '.formAddright', function (e) {
    e.preventDefault()
    let fd = new FormData(this)
    console.log(fd.get('linkicon'))
    $.post({
      url: 'admin/links',
      data: fd,
      processData: false,
      contentType: false,
      success: function (res) {
        if (res.status != 0) {
          return layer.msg(res.message)
        } else {
          layer.msg(res.message)
          // 关闭窗口
          layer.close(index)
          //重新渲染
          getLink()
        }
      },
    })

    //处理上传图片
  })
  //美化添加表单的文件域
  $('body').on('click', '.btn-input', function () {
    $('#linkFile').click()
  })
  //监听file文件的变化
  $('body').on('change', '#linkFile', function (e) {
    const objectURL = URL.createObjectURL(e.target.files[0])
    file = e.target.files[0]
    $('#preIcon').attr('src', objectURL)
  })
})
